<template>
	<view class="serve_item" @click="toDetail(artiItem.id)">
		<view class="serve_l">
			<u-avatar :size="73" mode="aspectFill" :src="artiItem.avatar_img"></u-avatar>
			<view class="js_status" v-if="artiItem.yuyue_status==1">
				可预约
			</view>
			<view class="js_status rest" v-else>
				休息中
			</view>
		</view>
		<view class="serve_r">
			<view class="sr_t">
				<view class="sr_title">
					<view class="username">
						{{artiItem.tech_name}}
					</view>
					<view class="score">
						<text v-for="index of (artiItem.level)" :key="index" class="icon-starmin-in-h"></text>
						<!-- <text class="score_num">{{artiItem.level}}</text> -->
					</view>
				</view>
				<view class="sr_xl">
					<view class="estimate-box">
						最早可约：10:30
					</view>
				</view>
			</view>
			<view class="sr_m">
				<view class="staff_info">
					<!-- <u-icon class="location" name="map-fill" color="#7a49dc" size="14" label="133.28KM" labelPos="right" labelSize="14px"></u-icon> -->
					<text class="serve_times">已服务:{{artiItem.yuyue_num}}单</text>
				</view>
				
			</view>
			<view class="sr_b">
				<view class="sr_b_l">
					<view class="ping">
						<text class="icon-msg"></text>
						<text>{{artiItem.pl_num}}</text>	
					</view>
					<text class="zan">
						<text class="icon-like"></text>
						<text>{{artiItem.zan_num}}</text>	
					</text>
					<text class="store">
						商家
					</text>
				</view>
				<view class="sr_b_r">
					<view v-if="artiItem.yuyue_status==1" class="apm" :id="artiItem.id" @click.stop="appointment">
						立即预约
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"artiRecommend",
		props:{
			artiItem:{
				type:Object
			}
		},
		data(){
			return{
				score:5
			}
		},
		methods:{
			toDetail(e){
				uni.navigateTo({
					url:"/package/teachInfo/index?tech_id="+e
				})
			},
			appointment(e){
				let tech_id = e.currentTarget.id
				let data = {
					isSheet:true,
					tech_id
				}
				this.$emit("apmTent",data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$myfont-color:#292929;
	.cred{
		color: #f55535;
	}
	@mixin ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	@mixin xcx  {
		display: inline-block;
		margin-right: 6px;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	.serve_item{
		display: flex;
		border-radius: 10px;
		background-color: #fff;
		padding: 8px 4px;
		width: 95%;
		margin: 0 auto 12px;
		box-sizing: border-box;
		.serve_l{
			overflow: hidden;
			border-radius: 5px;
			min-width: 73px;
			width: 20%;
			image{
				height: 100%;
			}
			.js_status{
				margin: 5px auto 0;
				width: 61px;
				height: 19px;
				border-radius: 9px;
				font-size: 12px;
				text-align: center;
				line-height: 19px;
				background: #7650e6;
				color: #fff;
			}
			.rest{
				background-color: #666;
				color: #fff;
			}
		}
		.serve_r{
			padding-left: 10px;
			flex: 1;
			// max-width: 275px;
			width: 78%;
			.sr_t{
				display: flex;
				align-items: center;
				.sr_title{
					flex: 1;
					display: flex;
					align-items: center;
					.username{
						color: $myfont-color;
						font-weight: 700;
						font-size: 16px;
						max-width: 67px;
						@include ellipsis;
					}
					.score{
						padding-left: 10px;
						.icon-starmin-in-h{
							display: inline-block;
							width: 12px;
							height: 11px;
							background-size: 100%;
						}
						.score_num{
							color: #999;
							font-size: 12px;
							margin-left: 4px;
						}
					}
				}
				.sr_xl{
					font-size: 10px;
					.estimate-box{
						height: 20px;
						background: #faf4d2;
						border-radius: 10px 0px 0px 10px;
						color: #e2ab09;
						font-size: 11px;
						padding: 0 10px;
						line-height: 20px;
					}
				}
			}
			.sr_m{
				margin-top: 12px;
				font-size: 12px;
				color: #666;
				.staff_info{
					display: flex;
					align-items: center;
				}
				.serve_times{
					// margin-left: 15px;
				}
				
			}
			.sr_b{
				margin-top: 6px;
				display: flex;
				align-items: flex-end;
				color: #666;
				font-size: 14px;
				.sr_b_l{
					display: flex;
					flex: 1;
					.ping{
						
						.icon-msg{
							width: 18px;
							height: 17px;
							background-image: url(https://img-cdn.duobashuzi.com/xianggui/img/pinglun.png);
							@include xcx;
						}
					}
					
					.zan{
						margin-left: 20px;
						.icon-like{
							width: 18px;
							height: 17px;
							background-image: url(https://img-cdn.duobashuzi.com/xianggui/img/zan.png);
							@include xcx;
						}
						.icon-like-in{
							width: 18px;
							height: 17px;
							background-image: url(https://img-cdn.duobashuzi.com/xianggui/img/zan1.png);
							@include xcx;
						}
					}
					.store{
						margin-left: 20px;
					}
					
				}
				.apm{
					width: 85px;
					height: 30px;
					border-radius: 15px;
					background: linear-gradient(90deg,#8d65e2,#4839ee);
					color: #fff;
					text-align: center;
					line-height: 30px;
				}
			}
		}
	}
</style>